<template>
	<view>
		<view style="position: relative;" v-if="isHide">
			<view class="dt-content" :style="'-webkit-line-clamp:'+line+';width: '+width"
				v-if="enableButton&&lines>line">
				<text class="content">
					{{ dt ? dt : '' }}
					<!-- {{ displayedText ? displayedText : '' }} -->
				</text>
			</view>
			<view class="dt-content2" :style="'-webkit-line-clamp:'+line+';width: '+width" v-else>
				<text class="content">
					{{ dt ? dt : '' }}
				</text>
			</view>
			<view class="button-show" @tap.stop="isHide = false" v-if="enableButton&&lines>line"
				:style="'width: '+expandTextWidth">
				<text style="font-size: 28rpx;color: #0FA291;">{{ expandText }}</text>
				<image style="width: 20rpx;height: 10rpx;margin-left: 10rpx;"
					src="https://pic.bangbangtongcheng.com/static/bbzc/recruitmentDetails/arrow-bottom.png"></image>
			</view>
		</view>
		<view v-else :style="'width: '+width">
			<view style="word-break: break-all;line-break: anywhere;">
				<text class="content">
					{{ dt ? dt : '' }}
				</text>
			</view>
			<view class="fold-hint" v-if="foldHint">
				<view @tap.stop="isHide = true">
					{{ foldHint }}
				</view>
			</view>
		</view>
		<view>
			<text class="placeholder">
				{{ placeholder }}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否隐藏多余行。初始状态不隐藏
				isHide: true,
				// 全量所占文本高度
				textHeight: 0,
				// 单行文本所占高度
				lineHeight: 1,
				// 占位文本
				placeholder: '占位符'
			};
		},
		props: {
			// 展示多少行
			line: {
				type: [Number, String],
				default: 1
			},
			// 文本
			dt: {
				type: [String],
				default: ''
			},
			enableButton: {
				type: Boolean,
				default: true
			},
			// 自定义展开提示
			expandText: {
				type: String,
				default: "展开"
			},
			// 自定义收起提示
			foldHint: {
				type: String,
				default: "收起"
			},
			width: {
				type: String,
				default: "auto"
			},
			expandTextWidth: {
				type: String,
				default: "0rpx"
			}
		},

		watch: {
			// dt(){
			//   let that = this
			//   setTimeout(() => {
			//     let query = uni.createSelectorQuery().in(that);
			//     // 获取所有文本在html中的高度
			//     query.select('.content').boundingClientRect(data => {
			//       that.textHeight = data.height
			//     }).exec();
			//   }, 100)
			// }
		},

		mounted() {
			if (this.enableButton) {
				let query = uni.createSelectorQuery().in(this);
				// 获取所有文本在html中的高度
				query.select('.content').boundingClientRect(data => {
					this.textHeight = data.height
				}).exec();

				// 通过占位元素获取单行文本的高度
				query.select('.placeholder').boundingClientRect(data => {
					this.lineHeight = data.height
				}).exec();
			}
			// 获取单行文本高度后，置空占位元素，使其释放占位
			this.placeholder = '';
		},
		computed: {
			// 全文本所占总行数
			lines() {
				if (!this.enableButton) {
					return this.line
				}
				return Math.floor(this.textHeight > 0 && this.lineHeight > 0 ? this.textHeight / this.lineHeight : 0)
			},
			// displayedText() {
			// 	if (this.lines <= this.line) {
			// 		return this.dt;
			// 	}
			// 	const words = this.dt.split('');

			// 	const end = words.length - (10 * this.line); // 计算从哪里开始替换省略号
			// 	if (end > 0) {
			// 		words.splice(end, 0, '...');
			// 		words.splice(this.line * 10, words.length - this.line * 10); // 截断超出部分的文字
			// 	}
			// 	return words.join('');
			// }
		}
	}
</script>

<style lang="less" scoped>
	.dt-content2 {
		overflow: hidden;
		//text-overflow: clip;
		display: -webkit-box;
		line-break: anywhere;
		word-break: break-all;
		-webkit-box-orient: vertical;
		color: #000000;
		font-size: 28rpx;
	}

	.dt-content {
		overflow: hidden;
		// text-overflow: clip;
		display: -webkit-box;
		line-break: anywhere;
		word-break: break-all;
		-webkit-box-orient: vertical;
		color: #000000;
		font-size: 28rpx;
	}

	.dt-content::after {
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		width: 18%;
		height: 1.5em;
		background: linear-gradient(to right, transparent, white 50%);
		background: white;
	}

	.button-show {
		display: flex;
		align-items: center;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 0;
		text-align: right;
		background-image: linear-gradient(-180deg, rgba(233, 236, 239, 0) 50%, #FFF 80%);
		padding-top: 2rem;

		&::before {
			display: inline-block;
			content: '...';
			position: absolute;
			left: -22rpx;
			background: #fff;
		}
	}

	.fold-hint {
		color: #64B6A8;
		text-align: right;
	}
	.placeholder {
		opacity: 0;
	}
</style>